<template>
  <div :class="$style.customMouth">
    <Button type="primary" @click="clickHandle">生成指定月份任务</Button>
    <el-dialog title="生成指定月份任务" :visible.sync="visible" @opened="opendHandle">
      <FormContainer :column="2">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="localDate" label="月份">
            <el-date-picker
              v-model="formData.localDate"
              type="month"
              placeholder="选择月"
              clearable
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="visible=false">取消</Button>
            <Button type="primary" @click="confirmHandle">确定</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import { dealerMonthCareTask } from '@/api/guestCare'
import FormContainer from '@/components/FormContainer'
import { parseTime } from '@/utils'
const curYear = (new Date()).getFullYear()
const curMonth = (new Date()).getMonth()
export default {
  name: 'CustomMouth',
  components: {
    FormContainer
  },
  data() {
    return {
      visible: false,
      formData: {
        localDate: ''
      },
      formRules: {
        localDate: [{ required: true, type: 'date', message: '请选择月份', trigger: 'change' }]
      },

      pickerOptions: {
        disabledDate(date) {
          if (curYear > date.getFullYear()) {
            return true
          } else if (curYear === date.getFullYear() && curMonth > date.getMonth()) {
            return true
          }
          return false
        }
      }
    }
  },
  methods: {
    clickHandle() {
      this.visible = true
    },
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        const localDate = parseTime(this.formData.localDate, '{y}-{m}-{d}')
        return dealerMonthCareTask(localDate).then(res => {
          this.visible = false
          this.$message.success(`生成${localDate}任务成功!共生成${res.data}条任务！`)
        })
      })
    },
    opendHandle() {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="scss" module>
.customMouth{
  display: inline-block;
}
</style>
